<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Breakout</title>

</head>
<body>
<h2>Breakout</h2>
<canvas id="canvas" width='300' height='260'>
Sorry: Browser does not support Graphics Canvas
</canvas>

<script type="text/javascript">

function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
}


document.onkeydown=keyDown;
document.onkeyup=keyUp;
//keys 
upArrow=38;dnArrow=40;
leftArraw=37;rightArrow=39;
space=32;

var score = 0;
var lives = 3;
var px=140;py=190;
var W=30;H=6;
var BW=20;BH=6;
var DIMX = 300; DIMY = 200;

var STEP = 7;
var step = STEP;

var bx=Math.round(Math.random()*DIMX/2+50);
var by=DIMY/3+5;
var dx=3;var dy=3;

var colors = [ "blue","orange","red","yellow","green","magenta","brown","cyan","gray","coral","violet" ];

var sounds = {  brick:    "sounds/brick.mp3",    paddle:   "sounds/paddle.mp3" };

var NCOL = Math.floor(DIMX/BW);
var NROW = Math.floor(DIMY/3/BH);

var wall = new Array(NROW);
var wallcolor = new Array(NROW);

init_wall();

var canvas=document.getElementById("canvas");
if(!canvas.getContext){exit}
var ctx=canvas.getContext("2d");

var suoni = new Array();
suoni["brick"] = new Audio("sounds/brick.wav");
suoni["paddle"] = new Audio("sounds/paddle.wav");

/*
soundManager.setup({
	url: 'sounds/swf/',
	flashVersion: 9,
	debugMode: false,
	onready: function() {
		for(var id in sounds) {
			suoni[id]=soundManager.createSound({
		    	id: id,
		    	autoLoad: true,
		    	autoPlay: false,
		   		url: sounds[id],
	    		volume: 100
		 	});
		}
	}
});
*/

function draw_wall(){
	ctx.beginPath();
	ctx.clearRect(1,1,DIMX-2,DIMY/3-2);
	ctx.fill();
	ctx.closePath();
	for(j=0 ;j<NROW; j++ ){
		ctx.beginPath();
		for(i=0 ;i<NCOL;i++){
			if(wall[j][i]==1){
				ctx.fillStyle=wallcolor[j];
				ctx.fillRect(i*BW,j*BH,BW-1,BH-1);
			}
		}
		ctx.closePath();
	}
}

function draw_score(){
	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.font = '14px san-serif';
	ctx.clearRect(20,210,100,25);
	ctx.fillText("SCORE:"+score,20,230);
	ctx.clearRect(220,210,60,25);
	ctx.fillText("LIVES:"+lives,220,230);
	ctx.closePath();
}

function collision(x,y){
	if( y > DIMY/3) return false;
	var a = Math.floor(x/BW);
	var b = Math.floor(y/BH);
	if(wall[b][a]==1){
		wall[b][a]=0;
		//soundManager.play("brick");
		suoni["brick"].play();
		score ++;
		return true;
	}
	return false;
}

function pad(x,y){
	if( Math.abs(py-y)>3) return false;
	if( Math.abs(px-x+15)<15){
		//soundManager.play("paddle");
		suoni["paddle"].play();
		return true;
	}
	return false;
}

function draw(){
	
	draw_wall();
	draw_score();
	
	if(collision(bx,by)){
		rnd = Math.round(Math.random()*6-3);
		dy = -dy
		dx = -(dx+rnd)%6;
	}
	
	if(pad(bx,by)){
		dy = -dy;
		dx = dx - (px-bx+15);
	}
	
	ctx.beginPath();
	ctx.strokeStyle="black";
	ctx.strokeRect(0,0,DIMX,DIMY);	

	ctx.fillStyle="black";
	// TODO sistemare 
	ctx.clearRect(bx-3,by-3,6,6);
	
	if(by>DIMY-4){
		if(lives==0){
			alert("GAME OVER");
			gameover();
		}
		lives--;
		bx=Math.round(Math.random()*DIMX/2+50);
		by=DIMY/3+5;
	}
	
	if( bx+dx > 0 && bx+dx < DIMX ){
		bx += dx;
	}else{
		dx = -dx;
	}
	if( by+dy > 0 && by+dy < DIMY ){
		by += dy;
	}else{
		dy = -dy;
	}
	
	ctx.beginPath();
	ctx.arc(bx,by,2,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.fillStyle="black";
	ctx.fillRect(px,py,W,H);
	ctx.closePath();
	
}

function gameover(){
	bx=Math.round(Math.random()*DIMX/2+50);
	by=DIMY/3+5;
	var score = 0;
	var lives = 3;
}

function keyDown(evt){
	//console.log("down");
	key = evt.keyCode;
	//alert("Key:"+evt.keyCode)  
	ctx.clearRect(px,py,W,H);
	switch(key){
		case 37:
			if(px-step>=1){
				step+=2;
				px -= step;	
			}else
				px=2;
	 		break;
	  	case 39:
	  		if(px+step+W<=DIMX-1){
	  			step+=2;
	  			px += step;		
	  		}else
	  			px = DIMX-W-2;
	  		break;
	}
}

function keyUp(evt){
	//console.log("up");
	step=STEP;
}

function init_wall(){
	for(j=0;j<NROW;j++){
		wall[j]=new Array(NCOL);
		for(i=0;i<NCOL;i++)
			wall[j][i]=1;
	}

	var rnd = Math.floor(Math.random()*colors.length);
	for(j=0 ;j<NROW;j++){
		wallcolor[j]=colors[rnd++%colors.length];
	}
}

setInterval(draw, 1000/25);

</script>

</body>
</html>